
$(function () {
    $('#registrationForm').bootstrapValidator();

    //--Bootstrap Date Range Picker--
    $('#reservation').daterangepicker();
    //加载渲染框
//        load_widget();
    $(".div_cls").css("height",(grid_height/577)*160);
    gridster = $(".gridster ul").gridster({
        widget_base_dimensions: [(grid_width-225*(document_sign%2)-40)/3, (grid_height/577)*200],
        widget_margins: [5, 5],
        helper: 'clone',
        resize: {
            enabled: true,
            stop: function (e, ui, $widget) {
                //缩放结束后，重新设置div大小，重新缩放视图
                var div = $("#" + $widget.attr('div_id'));
                var sizex = $widget.attr('data-sizex');
                var sizey = $widget.attr('data-sizey');
                div.css('width', ((grid_width-225*(document_sign%2)-40)/3-10) * sizex + (sizex - 1) * 20);
                div.css('height', (grid_height/577)*160 * sizey + (sizey - 1) * 30);
                if (div.highcharts()) {
                    //判断该div是否渲染了视图
                    createChart_a($widget.attr('div_id'));
                }
            }
        }
    }).data('gridster');
    $("#sidebar-toggler,#sidebar-collapse").click(function(){
        document_sign++;
        gridster.resize_widget_dimensions({
            widget_base_dimensions: [(grid_width-225*(document_sign%2)-40)/3, (grid_height/577)*200],
            widget_margins: [5, 5]
        });
        var divs=$(".div_cls");
        for(var i=0;i<divs.length;i++){
            var div=divs[i];
            var $div=$(div);
            var sizex = $div.parent().attr('data-sizex');
            var sizey = $div.parent().attr('data-sizey');
            $div.css('width', ((grid_width-225*(document_sign%2)-40)/3-10) * sizex + (sizex - 1) * 20);
            $div.css('height', (grid_height/577)*160 * sizey + (sizey - 1) * 30);
            if ($div.highcharts()) {
                //判断该div是否渲染了视图
                createChart_a($div.parent().attr('div_id'));
            }
        }
    });
    $('#simplewizardinwidget').wizard().on('finished', function (e) {
        closeChart();
        add_widget();
        //$('#simplewizardinwidget').stepclicked("1")
    });
});
function addModals() {
    $('#myModal').modal('show');
    indexInit('Select1', 'Select2');
    $('#registrationForm').bootstrapValidator();

}

//用于记录渲染框个数
var index = 1;

function closeChart() {
    //清除文本框内容
    cleanDiv();
}

/**
 * 清除文本框内容
 */
function cleanDiv() {
    $("#firstName").val();
    $("input[type='radio']").removeAttr('checked');
}


/**
 * 删除渲染框
 */
function remove_obj(li_obj) {
    gridster.remove_widget($('li[div_id="' + li_obj + '"]'));
}

/**
 * 添加渲染框
 */
function add_widget() {
    $('#myModal').modal('hide');
    var firstName = $("#firstName").val();
    cleanDiv();
    var html = '<li div_id="chart_' + index + '">' +
        '<div class="widget-header bg-blue"><span class="widget-caption">&nbsp;&nbsp;' + firstName + '</span> ' +
        '<div class="widget-buttons">' +
        '<a href="#" data-toggle="config"><i class="fa fa-cog"></i></a>&nbsp;&nbsp;' +
        '<a href="javascript:remove_obj(\'chart_' + index + '\')" data-toggle="dispose"><i class="fa fa-times"></i></a>&nbsp;&nbsp;' +
        '</div></div>' +
        '<div id="chart_' + index + '" class="div_cls" ><a href="javascript:void(0);" onclick="createChart_a(\'chart_' + index + '\')">添加渲染</a></div>' +
        '</li>';

    //gridster渲染
    gridster.add_widget(html);
    index++;
}

/**
 * 加载渲染框，根据后台数据
 */
function load_widget() {
    //测试数据，将来后台获取
    var json = '[{"col":1,"row":1,"size_x":3,"size_y":1,"div_id":"chart_1"},{"col":2,"row":2,"size_x":1,"size_y":1,"div_id":"chart_2"},{"col":3,"row":2,"size_x":1,"size_y":1,"div_id":"chart_3"},{"col":1,"row":2,"size_x":1,"size_y":1,"div_id":"chart_4"},{"col":2,"row":3,"size_x":1,"size_y":1,"div_id":"chart_5"},{"col":3,"row":3,"size_x":1,"size_y":1,"div_id":"chart_6"},{"col":1,"row":3,"size_x":1,"size_y":1,"div_id":"chart_7"},{"col":3,"row":4,"size_x":1,"size_y":1,"div_id":"chart_8"}]';
    $.each(eval(json), function (i, value) {
        var html = '<li div_id="' + value.div_id + '"data-col="' + value.col + '"data-row="' + value.row + '" data-sizex="' + value.size_x + '" data-sizey="' + value.size_y + '" >' +
            '<div class="widget-header bg-blue"><span class="widget-caption">&nbsp;&nbsp;合规检查' + (i + 1) + '</span> ' +
            '<div class="widget-buttons">' +
            '<a href="#" data-toggle="config"><i class="fa fa-cog"></i></a>&nbsp;&nbsp;' +
            '<a href="javascript:remove_obj(\'' + value.div_id + '\')" data-toggle="dispose"><i class="fa fa-times"></i></a>&nbsp;&nbsp;' +
            '</div></div>' +
            '<div id="' + value.div_id + '" class="div_cls" ><a href="javascript:void(0);" onclick="createChart_a(\'' + value.div_id + '\')">添加渲染</a></div>' +
            '</li>';
        $(".gridster ul").append(html);
        //设置图形展示div的样式
        var div = $("#" + value.div_id);
        var sizex = value.size_x;
        var sizey = value.size_y;
        div.css('width', 340 * sizex + (sizex - 1) * 20);
        div.css('height', 150 * sizey + (sizey - 1) * 30);

        //加载图形
        createChart_a(value.div_id);
    });

    //加载后，设置渲染框个数
    index = eval(json).length + 1;
}

/**
 * 获取页面渲染框位置
 */
function get_widget() {
    var s = gridster.serialize();
    alert(JSON.stringify(s));
}

/**
 * 级联操作
 * @param _cmbClassify
 * @param _cmbItems
 * @param defaultClassify
 * @param defaultItems
 */
var indexInit = function(_cmbClassify, _cmbItems, defaultClassify, defaultItems)
{
    var cmbClassify = document.getElementById(_cmbClassify);
    var cmbItems = document.getElementById(_cmbItems);
    cmbClassify.options.length = 0;
    //cmbItems.options.length = 0;

    /**
     * 改变下拉选择的内容
     * @param cmb
     * @param str
     */
    function cmbSelect(cmb, str)
    {
        for(var i=0; i<cmb.options.length; i++)
        {
            if(cmb.options[i].value == str)
            {
                cmb.selectedIndex = i;
                return;
            }
        }
    }

    /**
     * 添加option的属性
     * @param cmb
     * @param str
     * @param id
     * @param obj
     */
    function cmbAddOption(cmb, str, id, obj)
    {
        var option = document.createElement("OPTION");
        cmb.options.add(option);
        option.innerHTML = str;
        option.value = id;
        option.obj = obj;
    }

    /**
     * 级联修改选择名称，也可手动修改
     */
    function updateName(){
        $("#firstName").val($('#Select2 option:selected').text());
    }

    /**
     * 级联修改下一个
     */
    function changeClassify()
    {
        cmbItems.options.length = 0;
        cmbItems.onchange = null;
        if(cmbClassify.selectedIndex == -1)return;
        var item = cmbClassify.options[cmbClassify.selectedIndex].obj;
        for(var i=0; i<item.indexList.length; i++)
        {
            cmbAddOption(cmbItems, item.indexList[i].name, item.indexList[i].id, item.indexList[i]);
        }
        cmbSelect(cmbItems, defaultItems);
        updateName();
        cmbItems.onchange=updateName;
    }

    for(var i=0; i<constructionList.length; i++)
    {
        cmbAddOption(cmbClassify, constructionList[i].name, constructionList[i].id, constructionList[i]);
    }
    cmbSelect(cmbClassify, defaultClassify);
    changeClassify();
    cmbClassify.onchange = changeClassify;
}
var constructionList=[
    {
        "indexList": [
            {
                "id": 6,
                "name": "4A使用率指标-主动核查"
            },
            {
                "id": 7,
                "name": "4A使用率指标-被动核查"
            },
            {
                "id": 8,
                "name": "日志完整率指标"
            },
            {
                "id": 9,
                "name": "合规率指标"
            },
            {
                "id": 10,
                "name": "在线核查率指标"
            },
            {
                "id": 11,
                "name": "弱口令指标"
            },
            {
                "id": 12,
                "name": "绕行率指标"
            },
            {
                "id": 13,
                "name": "单点登录率指标"
            },
            {
                "id": 14,
                "name": "接入率指标"
            }
        ],
        "id": 1,
        "name": "集团考核"
    },
    {
        "indexList": [
            {
                "id": 15,
                "name": "资产变更的终端数量指标"
            },
            {
                "id": 16,
                "name": "病毒感染的终端数量指标"
            },
            {
                "id": 17,
                "name": "终端上网行为违规数量指标"
            },
            {
                "id": 18,
                "name": "系统漏洞指标"
            },
            {
                "id": 1,
                "name": "系统主机病毒指标指标"
            }
        ],
        "id": 2,
        "name": "基础安全指标"
    },
    {
        "indexList": [
            {
                "id": 19,
                "name": "垃圾短信"
            },
            {
                "id": 20,
                "name": "垃圾彩信"
            },
            {
                "id": 21,
                "name": "虚假主叫"
            },
            {
                "id": 22,
                "name": "骚扰电话"
            },
            {
                "id": 23,
                "name": "手机淫秽色情"
            },
            {
                "id": 24,
                "name": "手机恶意软件指标"
            }
        ],
        "id": 3,
        "name": "信息安全指标"
    },
    {
        "indexList": [
            {
                "id": 25,
                "name": "防火墙"
            },
            {
                "id": 26,
                "name": "IPS/IDS"
            },
            {
                "id": 27,
                "name": "DDOS"
            },
            {
                "id": 28,
                "name": "防病毒"
            },
            {
                "id": 29,
                "name": "网站防攻击系统的各类指标"
            }
        ],
        "id": 4,
        "name": "网络安全指标"
    },
    {
        "indexList": [
            {
                "id": 30,
                "name": "4A关键服务指标"
            },
            {
                "id": 31,
                "name": "合规关键服务指标"
            },
            {
                "id": 32,
                "name": "4A平台性能指标"
            },
            {
                "id": 33,
                "name": "合规平台性能指标"
            },
            {
                "id": 34,
                "name": "4A平台能力指标"
            },
            {
                "id": 35,
                "name": "合规平台能力指标"
            },
            {
                "id": 36,
                "name": "ISMP平台能力指标"
            }
        ],
        "id": 5,
        "name": "业务安全类指标"
    },{
        "indexList": [
            {
                "id": 37,
                "name": "cpu"
            },
            {
                "id": 37,
                "name": "内存"
            },
            {
                "id": 38,
                "name": "会话总数"
            },
            {
                "id": 39,
                "name": "TCP半连接数"
            }
        ],
        "id": 6,
        "name": "WAF"
    }
]
